<template>
  <fixtitetop>
	<template #l>
		   <view @click="back" class="iconfont icon-31fanhui1"></view>
	</template>  
  </fixtitetop>
 <view class="con">
	 <view class="tt">
	 	找回密码
	 </view>
	 <view class="pnhebox">
		 <view class="l">
			  <view class="iconfont icon-jia"></view>
			  <view >86</view>
			  <view class="iconfont icon-xiangxia"></view>
		 </view>
		 <view class="r">
			 <input v-model="phoneunmber" type="number" maxlength="11" placeholder="请输入手机号码"/>
		 </view>
	 </view>
	 <view class="bb">请输入已经注册的手机号</view>
	 <button class="button" @click="phonecodego" :disabled="!isok" :class="{bluebg:isok}">下一步</button>
 </view>
</template>

<script setup>
	import {computed, ref} from 'vue'
	import fixtitetop from '@/components/fixtitletop/fixtitletop.vue'
	import {getishasphone,getsendphoneyzm} from '@/api/index.js'
	const phoneunmber=ref('')
	const isok=computed(()=>{
		return phoneunmber.value.trim().length==11
	})
	const back=()=>{
		uni.navigateBack()
	}
	const phonecodego=async()=>{
		//发请求
		const ishas=await getishasphone(phoneunmber.value)
		if(ishas.code==200){
			const rudata=await getsendphoneyzm(phoneunmber.value)
			if(rudata.code==200){
				uni.navigateTo({
					url:`/pages/findYzm/findYzm?phone=${phoneunmber.value}`
				})
			}else if(rudata.code==1){
				 uni.showToast({
				 	title:"发送频繁！",
					icon:"none"
				 })
			}	
		}else{
			uni.showToast({
				title:"手机号未注册！",
				icon:"none"
			})
		}
		console.log(ishas)
		// uni.navigateTo({
		// 	url:`/pages/findYzm/findYzm?phone=${phoneunmber.value}`
		// })
	}
</script>

<style lang="scss" scoped>

	.iconfont{
		font-size: 27rpx;
	}
	.con{
		width: 100%;
		padding: 0 50rpx;
		.tt{
			margin-top: 60rpx;
			height: fit-content;
			width: 100%;
			text-align: start;
			font-size: 45rpx;
			font-weight: 700;
			line-height: 70rpx;
		}
		.pnhebox{
			width: 100%;
			height: 80rpx;
			background-color: #f4f4f4;
			display: flex;
			align-items: center;
			font-size: 25rpx;
			border-radius: 10rpx;
			margin-top: 150rpx;
			.l{
				width: 20%;
				height: 50%;
				border-right: 2px solid #d5d5d5;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8rpx;

				.iconfont{
					font-size: 20rpx;
				}
			}
			.r{
				flex: 1;
				font-size: 25rpx;
				padding-left:30rpx ;
			}
		}
	    .bb{
			font-size: 20rpx;color: #909090;            
			margin-top: 10rpx;
		}
		.button{
			height: 90rpx;
			width: 100%;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			color: #fff;
			background-color: #dfdfdf;
			margin-top: 70rpx;
			border: none;
		}
		.mima{
			font-size: 20rpx;
			color: #6491f8;margin-top: 30rpx;
		}
	}
</style>
